<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row v-show="showSearch">
        <el-form
          ref="queryRef"
          :inline="true"
          :model="tableOptions.queryForm"
          @keyup.enter="queryTableData"
        >
          <el-form-item label="用户" prop="userId">
            <CommonSelect
              v-model:defaultValue="tableOptions.queryForm.userId"
              :placeholder="translate('请输入用户姓名后检索')"
              label="userName"
              value="id"
              url="/admin/sysuser/getlist"
            />
          </el-form-item>
          <el-form-item label="角色" prop="roleId">
            <CommonSelect
              v-model:defaultValue="tableOptions.queryForm.roleId"
              :placeholder="translate('请输入用户姓名后检索')"
              label="roleName"
              value="id"
              url="/admin/role/getlist"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="refresh-left"
              type="warning"
              @click="handleResetQuery"
              >重置</el-button
            >
            <el-button icon="Search" type="primary" @click="queryTableData"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="mb8" style="width: 100%">
          <RightToolBar
            v-model:showSearch="showSearch"
            class="ml10 mr20"
            style="float: right"
            @refresh="queryTableData"
          />
        </div>
      </el-row>
      <el-table
        ref="tableRef"
        v-loading="tableOptions.loading"
        border
        :data="tableOptions.dataList"
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
        :height="tableOptions.height"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="handleSortChange"
      >
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="用户名" prop="userName" show-overflow-tooltip />
        <el-table-column
          label="部门"
          prop="mainDeptName"
          show-overflow-tooltip
        />
        <el-table-column label="角色" prop="roleNames" show-overflow-tooltip />
        <el-table-column label="状态" prop="statusDesc" show-overflow-tooltip />
        <el-table-column
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
          width="180"
        />
        <el-table-column label="功能" width="180" fixed="right">
          <template #default="scope">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <el-button
                v-if="props.nodeUserType === '0' || props.nodeUserType === '1'"
                icon="UserFilled"
                text
                type="primary"
                @click="handleChooseUser(scope.row)"
              >
                人员
              </el-button>
              <el-button
                v-if="props.nodeUserType === '1' || props.nodeUserType === '2'"
                icon="User"
                text
                type="primary"
                @click="handleChooseRole(scope.row)"
              >
                角色
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="tableOptions.pagination.current"
        :layout="tableOptions.pagination.layout"
        :page-size="tableOptions.pagination.size"
        :total="tableOptions.pagination.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <el-dialog
      v-model="data.dialogVisible"
      title="选择角色"
      append-to-body
      width="50%"
    >
      <el-radio-group v-model="data.chooseRole" class="choose-role">
        <el-row :span="96">
          <el-col
            v-for="(item, index) in data.rowRoleList"
            :key="index"
            :md="48"
            :xs="12"
            :sm="12"
          >
            <el-radio
              :value="item.id"
              :label="item.roleName"
              @dblclick="handleEmitEvent('ROLE_' + item.id)"
            />
          </el-col>
        </el-row>
      </el-radio-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button icon="circle-close" type="warning" @click="handleRoleClose"
            >取消</el-button
          >
          <el-button
            icon="circle-check"
            type="primary"
            @click="handleRoleConfirm"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" name="ChooseUser" setup>
import { queryUserTable } from "@/api/admin/org/sysuser";
import { BasicTableProps, useTable } from "@/hooks/table";
import { getTableHeight } from "@/utils/util";
import { ref, reactive } from "vue";
import { translate } from "@/plugins/i18n";
import CommonSelect from "@/components/commonSelect.vue";
import RightToolBar from "@/components/rightToolBar.vue";

const props = defineProps({
  nodeUserType: {
    type: String,
    default: null
  }
});

// 定义变量内容
const queryRef = ref();
const showSearch = ref(true);
const tableRef = ref(null);

const tableOptions: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    id: "",
    roleId: ""
  },
  autoLoad: true,
  height: getTableHeight(1, true, true) - 10,
  queryFunction: queryUserTable,
  descs: ["user_code"]
});

const {
  tableStyle,
  queryTableData,
  handleSelectionChange,
  handleResetQuery,
  handleRowClick,
  handleSizeChange,
  handleCurrentChange,
  handleSortChange
} = useTable(tableOptions, tableRef);

const data = reactive({
  // 选择的办理角色
  chooseRole: undefined,
  dialogVisible: false,
  rowRoleList: []
});

const $emit = defineEmits(["confirm"]);

function handleChooseUser(row) {
  $emit("confirm", row.id);
  data.dialogVisible = false;
}

function handleChooseRole(row) {
  //角色
  if (row.roleList.length === 1) {
    data.chooseRole = row.roleList[0].id;
    handleEmitEvent("ROLE_" + row.roleList[0].id);
  } else {
    data.rowRoleList = row.roleList;
    data.dialogVisible = true;
  }
}

function handleRoleConfirm() {
  handleEmitEvent("ROLE_" + data.chooseRole);
}

//0:转办，只能选择人员
//1:指派任务 可以选择人员/角色
function handleEmitEvent(userOrRole?: string) {
  // // 0、转办 1、下一办理人 2、反签收
  $emit("confirm", userOrRole);
  data.dialogVisible = false;
}

function handleRoleClose() {
  data.dialogVisible = false;
}
</script>

<style scoped>
.choose-role {
  width: 100%;
}
</style>
